<template>
  <div class="aside" style="height: 100%; width: 270px;">
    <el-row class="tac" style="height: 100%; width: 100%;">
      <el-col :span="12" style="height: 100%; width: 100%;">
        <el-menu 
          default-active="this.$route.path" router
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#ffffff"
          text-color="#000"
          active-text-color="#ffffff"
		  active-
          style="height: 100%; width: 100%;">
          
		  <el-menu-item index="/grades">
		    <i class="el-icon-location"></i>
		    <span slot="title">班级成绩</span>
		  </el-menu-item>
          <el-menu-item index="/courses">
            <i class="el-icon-menu"></i>
            <span slot="title">上传认证课程</span>
          </el-menu-item>
          <el-menu-item index="/message">
            <i class="el-icon-document"></i>
            <span slot="title">消息中心</span>
          </el-menu-item>
          <el-menu-item index="/shenpi">
            <i class="el-icon-setting"></i>
            <span slot="title">证明审批</span>
          </el-menu-item>
          
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped>
	.aside{
		position: absolute;
        top: 70px;	    
	}
	.is-active{
		background-color: #951d1d;
	}
</style>
	